<template>
    <div class="TreatedBox">
        <span class="pageName">钱包管理 > 提现已处理</span>

        <!-- 搜索框 -->
        <div class="searchBox">
            <div class="searchInp">
                <label for="userID" style="margin-left:0px">
                    用户ID：
                </label>
                <el-input v-model="userID" placeholder="请输入用户ID" name="userID" class="inp"></el-input>

                <label for="orderID">
                    订单ID：
                </label>
                <el-input v-model="orderID" placeholder="请输入订单ID" name="orderID" class="inp"></el-input>

                <label for="transactionBill">
                    交易单号：
                </label>
                <el-input v-model="transactionBill" placeholder="请输入交易单号" name="transactionBill" class="inp"></el-input>

                <label for="style">
                    提现方式：
                </label>
                <el-select v-model="styleValue" slot="prepend" placeholder="全部" name="style" class="option">
                    <el-option v-for="optionArr in styleArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>
                <label for="mode">
                    状态：
                </label>
                <el-select v-model="modeValue" slot="prepend" placeholder="全部" name="mode" class="option">
                    <el-option v-for="optionArr in modeArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>

                <!-- 时间 -->
                <label for="date">
                    提交时间：
                </label>
                <el-date-picker v-model="transactionDate" type="daterange" align="right" unlink-panels
                    range-separator="~" start-placeholder="2015-10-02" :end-placeholder="endDate"
                    :picker-options="pickerOptions" value-format="yyyy-MM-dd" class="dateInp">
                </el-date-picker>
                <label for="date" class="noGapLabel">
                    处理时间：
                </label>
                <el-date-picker v-model="handleDate" type="daterange" align="right" unlink-panels range-separator="~"
                    start-placeholder="2015-10-02" :end-placeholder="endDate" :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd" class="dateInp">
                </el-date-picker>

                <el-button type="primary" @click="searchUser">搜索</el-button>
            </div>

        </div>
        <!-- 表格 -->
        <div class="tableBox">
            <el-table :data="treatedList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                tooltip-effect="dark" border style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;"
                :header-cell-style="{ background: '#015478', color: '#fff' }" margin="auto">
                <el-table-column prop="userId" label="用户ID" align="center">
                </el-table-column>
                <el-table-column prop="orderID" label="订单ID" align="center" width="115">
                </el-table-column>
                <el-table-column prop="amount" label="金额" align="center">
                </el-table-column>
                <el-table-column prop="actualPayment" label="实际打款" align="center">
                </el-table-column>
                <el-table-column prop="style" label="提现方式" align="center">
                </el-table-column>
                <el-table-column prop="account" label="账号" align="center" width="170">
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center">
                </el-table-column>
                <el-table-column prop="bank" label="开户行" align="center" width="165">
                </el-table-column>
                <el-table-column prop="transactionBill" label="交易单号" align="center" width="150">
                </el-table-column>
                <el-table-column prop="time" label="提交时间" align="center" width="135">
                </el-table-column>
                <el-table-column prop="handleMode" label="状态" align="center">
                </el-table-column>
                <el-table-column prop="handleTime" label="处理时间" align="center" width="135">
                </el-table-column>
                <el-table-column prop="remarks" label="备注" align="center">
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination :tableData="treatedList" @sizeChange="sizeChange" @currentChange="currentChange">
            </pagination>

        </div>
    </div>
</template>

<script>

import pagination from '@/components/pagination/pagination.vue';

export default {
    name: 'Treated',
    components: {
        pagination
    },
    data() {
        return {
            treatedList: [],
            currentPage: 1, // 当前页码
            total: '', // 总条数
            pageSize: 8, // 每页的数据条数

            // 输入框内容
            userID: '',
            orderID: '',
            transactionBill: '',
            styleValue: '',
            modeValue: '',
            transactionDate: '',
            handleDate: '',

            styleArr: [
                { id: 0, content: '全部' },
                { id: 1, content: '微信' },
                { id: 2, content: '支付宝' },
                { id: 3, content: '银行卡' }
                
            ],
            modeArr: [
                { id: 0, content: '全部' },
                { id: 1, content: '已驳回' },
                { id: 2, content: '打款成功' },
                { id: 3, content: '打款失败' }
            ],
            // 设置默认显示时间
            endDate: '',
            // 时间输入框快捷选项
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                // 设置可选时间范围
                disabledDate: (time) => {
                    return time.getTime() <= new Date('2015-10-01').getTime() || time.getTime() > Date.now() - 8.64e6
                }
            }
        }
    },
    methods: {
        sizeChange(current, count) {
            this.currentPage = current;
            this.pageSize = count;
        },
        currentChange(current) {
            this.currentPage = current
        },
        // 获取当前日期
        handleTimeNew() {
            let now = new Date();
            let year = now.getFullYear();
            let month = (now.getMonth() + 1).toString().padStart(2, 0);
            let day = now.getDate().toString().padStart(2, 0);
            return year + '-' + month + '-' + day
        },
        // 搜索
        searchUser() {
            this.$axios({
                method: 'get',
                url: this.$api.transaction.treatedListSearch,
                params: {
                    userId: this.userID,
                    orderId: this.orderID,
                    transactionBill: this.transactionBill,
                    style: this.styleValue,
                    handleMode: this.modeValue,
                    transactionDate: this.transactionDate,
                    handleDate: this.handleDate,
                }
            })
                .then(res => {
                    this.treatedList = res.data;
                    this.userID = '',
                    this.orderID = '',
                    this.transactionBill = ''
                })
                .catch(err => {
                    console.log(err);
                })
        },

    },
    created() {
        this.styleValue = this.styleArr[0].content,
            this.modeValue = this.modeArr[0].content,
            this.endDate = this.handleTimeNew()
        this.$axios.get(this.$api.transaction.treatedList)
            .then(res => {
                this.treatedList = res.data;
            })
            .catch(err => {
                console.log(err);
            })
    },
}
</script>

<style scoped>
.TreatedBox {
    display: flex;
    flex-direction: column;
}

.inpBox {
    display: flex;
    padding: 10px 10px;
}

.searchInp {
    height: 100px;
    display: flex;
    align-items: center;
    align-content: space-around;
    margin-left: 20px;
    flex-wrap: wrap;
}

.inp {
    width: 120px;
}

.option {
    width: 100px;
}

.dateInp {
    width: 225px;
}

button {
    height: 40px;
    margin-left: 10px;
}
</style>